<template>
  <div class="box-container">
    <div v-if="requestList.length == 0" style="width: 100%">
      <div class="box" v-if="showBox == 0">
        <div class="header">
          <div class="title">欢迎!</div>
          <div class="subtitle">请输入您要创建或者加入的企业</div>
        </div>
        <div class="company">
          <div class="input-box">
            <div class="input">
              <input :style="{'border':errMsg!=null?'1px solid red':''}" @focus="errMsg = null" v-model="companyName" placeholder="支持字母、数字组合"/>
            </div>
            <div class="site">.shihuan.site</div>
          </div>
          <div class="error-info" v-if="errMsg!=null" v-text="errMsg"></div>
        </div>
        <div>
          <ZshButton :loading="loading" name="next" @click="next">继续</ZshButton>
        </div>
      </div>
      <div class="box" v-if="showBox == 1">
        <div class="header">
          <div class="title" style="margin-bottom: 50px">填写企业信息</div>
        </div>
        <div>
          <ZshInput placeholder="企业名称" v-model="tenantInfo.name" :error="tenantErr.name"/>
          <ZshInput placeholder="访问地址" :disabled="true" v-model="tenantInfo.site" :error="tenantErr.site"/>
        </div>
        <div class="btn">
          <ZshButton :loading="loading" name="saveTenantInfo" @click="saveTenantInfo">完成</ZshButton>
        </div>
        <div class="back-btn" @click="showBox = 0">
          <i class="el-icon-back"></i>
          返回
        </div>
      </div>
      <div class="box" v-if="showBox == 2">
        <div class="header">
          <div class="title" style="margin-bottom: 50px">填写您的申请信息</div>
        </div>
        <div>
          <div>
            <ZshInput placeholder="姓名" v-model="joinInfo.name" :error="joinErr.name"/>
            <ZshInput placeholder="邮箱" v-model="joinInfo.email" :error="joinErr.email"/>
            <ZshInput placeholder="手机号" v-model="joinInfo.mobile" :error="joinErr.mobile"/>
            <ZshInput placeholder="申请描述" v-model="joinInfo.comment" :error="joinErr.comment"/>
          </div>
        </div>
        <div>
          <ZshButton :loading="loading" name="saveJoinInfo" @click="saveJoinInfo">完成</ZshButton>
        </div>
        <div class="back-btn" @click="showBox = 0">
          <i class="el-icon-back"></i>
          返回
        </div>
      </div>
    </div>
    <div class="box" v-else>
      <div style="padding: 10px 0;">您正在申请以下公司</div>
      <div v-for="item in requestList" style="padding-bottom: 10px;font-size:18px;color: #0091ff;" v-text="item.tenantName?item.tenantName:'该企业未设置名称'"></div>
      <el-button size="small" type="danger">取消申请</el-button>
    </div>
  </div>
</template>

<script>
import CenterBox from '@/components/common/center-box'
import ZshButton from '@/components/common/zsh-button'

import {getTenantBySite,saveTenant,joinTenant} from "@/api/auth/tenant";
import {deleteById} from "@/api/knowledge";
import {setToken} from "@/libs/util";
import {disconnect} from "@/api/im";
import {findMyTenantRequestList} from "@/api/auth";
import ZshInput from '@/components/common/zsh-input'
import {isNotNull} from "@/libs/util";

export default {
  name: "index",
  components:{
    CenterBox,
    ZshButton,
    ZshInput
  },
  data() {
    return {
      loading:'',
      companyName:null,
      errMsg:null,
      showBox:0,
      requestList:[],
      //表单验证
      tenantInfo:{},
      tenantErr:{
        name:''
      },
      joinInfo:{},
      joinErr:{
        name:'',
        email:'',
        mobile:'',
        comment:''
      }
    }
  },
  created() {
    findMyTenantRequestList().then(res => {
      if(res.code == 200) {
        this.requestList = res.data
      }
    })
  },
  methods: {
    next() {
      //check company Name
      if(this.companyName!=null && this.companyName.trim()!='') {
        if(this.companyName.trim().length >= 11) {
          this.errMsg = '企业访问网址应在11字符以内'
          return
        }
        let companyName = this.companyName.trim()
        this.loading = 'next'
        //company exists?
        getTenantBySite(companyName).then(res => {
          if(res.code == 200) {
            //公司已存在
            if(res.data != null) {
              this.confirmJoin(res.data)
            }else{
              this.confirmCreate()
            }
          }else {
            this.loading = ''
            this.$message.error(res.msg)
          }
        })
      }else {
        this.errMsg = '请输入company'
      }
    },
    successAllJob() {
      setToken('')
      disconnect()
      this.$store.commit('updateUserInfo',null)
      this.$router.push({path:'/'})
    },
    confirmJoin(tenant){
      let msg = '是否申请加入'+(tenant.name?'<span style="color:#0091ff">'+tenant.name+'</span>':'该企业')+'?'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        center:true,
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.showBox = 2
        this.joinInfo.name = this.$store.state.userInfo.nickname
        this.joinInfo.tenantId = tenant.tenantId
        this.joinInfo.email = this.$store.state.userInfo.email
        this.joinInfo.mobile = this.$store.state.userInfo.mobile
        this.loading = ''
      }).catch(()=>{
        this.loading = ''
      });
    },
    confirmCreate() {
      let msg = '是否想要创建新的企业账号?'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        center:true
      }).then(() => {
        this.tenantInfo.site = this.companyName
        this.showBox = 1
      }).catch(()=>{
      }).finally(()=>{
        this.loading = ''
      });
    },
    saveTenantInfo(){
      if(!isNotNull(this.tenantInfo.name)) {
        this.tenantErr.name = '请输入企业名称'
        return
      }
      saveTenant(this.tenantInfo).then(res => {
        if(res.code == 200) {
          this.$alert('创建企业账号成功,点击重新登录', '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
              this.successAllJob()
            }
          });
        }
      })
    },
    saveJoinInfo(){

      let flag = false
      if(!isNotNull(this.joinInfo.name)) {
        this.joinErr.name = '请输入您的姓名'
        flag = true
      }
      if(!isNotNull(this.joinInfo.email)) {
        this.joinErr.email = '请输入您的邮箱'
        flag = true
      }
      if(!isNotNull(this.joinInfo.mobile)) {
        this.joinErr.mobile = '请输入您的手机号'
        flag = true
      }
      if(!isNotNull(this.joinInfo.comment)) {
        this.joinErr.comment = '请简单描述以下您的身份以及申请的部门'
        flag = true
      }
      if(flag) {
        return
      }

      joinTenant(this.joinInfo).then(res => {
        if(res.code == 200) {
          this.$alert('申请已发送，等待审核通过', '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
              this.successAllJob()
            }
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.box-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-40px);
  position: relative;

  .back-btn {
    position: absolute;
    left: 50px;
    top: 50px;
    font-size: 18px;
    color: #666666;
    i {
      font-size: 20px;
    }
    &:hover {
      color: #0091ff;
      cursor: pointer;
    }
  }

  @media(max-width: 679px) {
    .back-btn {
      left: 15px;
      top: 20px;
      width: 20px;
      height: 20px;
      overflow: hidden;
    }
  }

  .box {
    width: 600px;
    margin: 90px auto;
    box-sizing: border-box;
    padding: 100px;
    border: 1px solid #EAEEF1;
    text-align: center;
    background-color: #f6f7f8;
    position: relative;

    .header {
      .title {
        font-size: 24px;
        color: #4c5156;
        margin-bottom: 10px;
        white-space: nowrap;
      }
      .subtitle {
        font-size: 16px;
        color: #999999;
      }
    }
    .company {
      margin-top: 10px;
      padding: 10px 0;
      position: relative;

      .input-box {
        display: flex;
        align-items: center;
        .input {
          flex: 1;
          input {
            padding: 0;
            height: 40px;
            line-height: 40px;
            border-radius: 3px;
            padding:0 14px;
            display: inline;
            box-sizing: border-box;
            font-size: 18px;
            outline: none;
            box-shadow: none;
            background-image: none;
            border: 1px solid #E8E8E8;
            width: 100%;
            &:focus {
              border: 1px solid #0091FF;
            }
            &::-webkit-input-placeholder {
              font-size: 16px;
              color: #E8E8E8;
            }
          }
        }
        .site {
          width: 145px;
          font-size: 18px;
          color: #999999;
          flex-shrink: 0;
        }
      }
      .error-info {
        position: absolute;
        left: 0;
        border: 5px;
        text-align: left;
        font-size: 12px;
        color: red;
      }
    }
    .btn {
      .later {
        margin-top: 10px;
        font-size: 12px;
        color: #666666;
        cursor: pointer;
        text-align: center;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  @media(max-width: 679px) {
    .box {
      width: 90%;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 150px;
    }
  }
}
</style>
